<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="输入广告关键字" class="handle-input mr10"></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" :icon="Plus" @click="jumpTo">新增</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="banner_title" label="标题"></el-table-column>
                <el-table-column label="广告介绍">
                    <template #default="scope">{{ scope.row.banner_desc }}</template>
                </el-table-column>
                <el-table-column label="查看大图" align="center">
                    <template #default="scope">
                        <el-image class="table-td-thumb" :src="scope.row.banner_picUrl" :z-index="10" :preview-src-list="[scope.row.banner_picUrl]" preview-teleported> </el-image>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="banner_create_time" label="时间"></el-table-column> -->
                <el-table-column label="网页地址" align="center">
                    <template #default="scope">
                        <a target="_blank" :href="scope.row.banner_href">{{ scope.row.banner_href }}</a>
                    </template>
                </el-table-column>

                <el-table-column prop="banner_create_time" label="发布时间"></el-table-column>
                <el-table-column label="操作" width="220" align="center">
                    <template #default="scope">
                        <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15"> 编辑 </el-button>
                        <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="15"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" v-model="editVisible" width="30%">
            <el-form label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import moment from "moment";
// 对接后台数据接口
import { bannerList, deleteBanner, searchBanner } from "../api/index";
// 导入创建路由方法
import { useRouter } from "vue-router";
// 定义路由
const $router = useRouter();

// 接口： 类型约束（规范）
interface TableItem {
    banner_href: string;
    banner_title: string;
    banner_desc: string;
    banner_picUrl: string;
    banner_create_time: string;
    banner_id: string;
}

const query = reactive({
    name: "",
    pageIndex: 1,
    pageSize: 10,
});
// 记录轮播图列表数据
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
    bannerList().then((content) => {
        console.log("1111->", content);
        let { msg, code, result } = content;
        if (code == 200) {
            // 整合数据
            let arr = result.map((item: any) => {
                if (item.banner_create_time) {
                    item.banner_create_time = moment(item.banner_create_time).format("YYYY-MM-DD hh:mm:ss");
                }
                return item;
            });
            tableData.value = arr;
            pageTotal.value = result.length;
        }
    });
};
getData();

// 查询操作
const handleSearch = () => {
    console.log(query.name);
    // query.pageIndex = 1;
    // getData();
    searchBanner({ keyword: query.name }).then((data) => {
        console.log(data.code);
        if (data.code == 200) {
            console.log(data.result);
            let arr = data.result.map((item: any) => {
                if (item.banner_create_time) {
                    item.banner_create_time = moment(item.banner_create_time).format("YYYY-MM-DD hh:mm:ss");
                }
                return item;
            });
            tableData.value = arr;
            pageTotal.value = data.result.length;
        }
        // if

        //
        //
    });
};
// 分页导航
const handlePageChange = (val: number) => {
    query.pageIndex = val;
    getData();
};

// 删除操作
const handleDelete = (index: number) => {
    // 二次确认删除
    // console.log(tableData.value[index].banner_id);
    let { banner_id } = tableData.value[index];
    ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
    })
        .then(() => {
            console.log(banner_id);
            deleteBanner({ banner_id }).then((data) => {
                console.log(data);
                if (data.code == 200) {
                    ElMessage.success("删除成功");
                    tableData.value.splice(index, 1);
                }
            });
            // console.log();
        })
        .catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    name: "",
    address: "",
});
let idx: number = -1;
const handleEdit = (index: number, row: any) => {
    idx = index;
    form.name = row.name;
    form.address = row.address;
    console.log(idx, form.name);
    editVisible.value = true;
};
const saveEdit = () => {
    editVisible.value = false;
    ElMessage.success(`修改第 ${idx + 1} 行成功`);
};

// 点击新增
const jumpTo = () => {
    $router.push({
        path: "/banner",
    });
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #f56c6c;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
